<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted, ref} from "vue";

let HotRef = ref();

onMounted(() => {
  let chart = echarts.init(HotRef.value);
  chart.setOption({
    title: {
      text: '景区排行',
      left: '40%',
      textStyle: {
        color: 'white',
        fontSize:20
      },
      subtext: '各大景区排行',
      subtextStyle: {
        color: 'white',
        fontSize: 16
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {},
    series:{
      type:'bar',
      data: [10,20,30,40,50,60,70],
      itemStyle:{
        borderRadius: [5,5,0,0]
      }
    },
    grid: {
      left: 20,
      right: 10,
      bottom: 20,
    }
  })
})
</script>

<template>
  <div class="hot">
    <div class="title">
      热门景区排行
    </div>
    <div class="chart" ref="HotRef">

    </div>
  </div>
</template>

<style scoped lang="scss">
.hot {
  flex: 1;
  margin: 10px;
  background-color: #79bbff;

  .title {
    color: white;
    font-size: 20px;
  }

  .chart {
    height: calc(100% - 30px);
    width: 100%;
  }
}
</style>